iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
自我挑戰組

Vue.js 從零開始系列 第 19

Vue.js 從零開始:元件

  • 分享至 

  • xImage
  •  

Vue 元件概念

https://ithelp.ithome.com.tw/upload/images/20210929/20118347TMBron536s.png

Component元件,作為SPA的靈魂功能,可以將程式碼以及模組封裝起來,增加程式碼的可複用性,能避免單一檔案過大,例如程式碼過多超過兩百行,就可考慮切分出來,多人開發時也能較好維護,增加閱讀性,減少未來維護的成本。每個元件實體與Data、作用域都是獨立的,不應該有子元件去影響到根元件的的資料,下一篇會有更詳細的說明。


全域註冊

<div id="app">
    <h4>{{ text }}</h4>
    <con-tainer></con-tainer>   
</div>
const app = Vue.createApp({
  data() {
    return {
      text: "外部元件"
    };
  }
});
const app = Vue.createApp({
  data() {
    return {
      text: "外部元件"
    };
  }
});
app.component("ConTainer", {
  data() {
    return {
      text: "內部元件/全域註冊"
    };
  },
  template: `<div>
    <h4>{{ text }}</h4>
  </div>`
});
app.mount("#app");

  • 元件需定義在createApp之後。
  • app.component('ConTainer',{})裡面的'ConTainer'為元件名稱。
  • 結構與最外層的根元件差別在與多了template
  • 把元件名稱用標籤的形式<container></container>,寫在#app裡。

補充:當元件命名使用駝峰命名,瀏覽器在解析HTML,不會區分大小寫,寫在HTML需要使用小寫與連字號標籤<con-tainer></con-tainer>


區域註冊

<div id="app">
    <h4>{{ text }}</h4>
    <con-tainer></con-tainer>  
    <area2></area2>
</div>
const area2 = {
  data() {
    return {
      text: "根元件的子元件/區域註冊"
    };
  },
  template: `<div>
    <h4>{{ text }}</h4>
  </div>`  
}
const app = Vue.createApp({
  data() {
    return {
      text: "外部元件"
    };
  },
  components:{
    area2
  }
});
app.component("ConTainer", {
  data() {
    return {
      text: "內部元件/全域註冊"
    };
  },
  template: `<div>
    <h4>{{ text }}</h4>
  </div>`
});
app.mount("#app");
  1. 在最外層增加一個area2物件,結構跟全域元件一樣。
  2. 定義區域元件掛載的地方,上面範例是掛在根元件上,component要多加一個s,並且寫上物件名稱。
  3. HTML寫上components裡面的。

模組化

把元件獨立成一隻檔案(獨立元件),Vue CLI常用的方式,利用ESModule的方式匯入進來使用。
建立一支component.jsJavaScript檔案,檔案內容為:

//匯出
export default {
    data() {
        return {
          text: "外部匯入的元件!",
        };
      },
      template: `<div>
        <h4>{{ text }}</h4>
      </div>` 
}

<div id="app">
        <h4>{{ text }}</h4>
        <con-tainer></con-tainer>  
        <area2></area2>
        <external></external>
 </div>
<script type="module">
import external from './component.js';
const area2 = {
  data() {
    return {
      text: "根元件的子元件/區域註冊"
    };
  },
  template: `<div>
    <h4>{{ text }}</h4>
  </div>`  
}
const app = Vue.createApp({
  data() {
    return {
      text: "外部元件"
    };
  },
  components:{
    area2,
    external
  }
});
app.component("ConTainer", {
  data() {
    return {
      text: "內部元件/全域註冊"
    };
  },
  template: `<div>
    <h4>{{ text }}</h4>
  </div>`
});
app.mount("#app");
</script> 
</body>
</html>
  1. 匯入 import external from './component.js';
  2. <script>要加上type="module"

元件樣板

樣板就是指HTML,有以下幾種方式可以建立:

template

可以看上面的範例。

x-template

隨著專案的成長,HTML結構越來越多時,都只使用template屬性掛載在HTML上,會顯得不好閱讀,可以使用x-template
HTML結構封裝在<script>裡面:

<div id="app">
    <h4>{{ text }}</h4>
    <con-tainer></con-tainer>  
    <area2></area2>
    <external></external>
    <demo></demo>
</div>
<script type="text/x-template" id="xtemplate">
    <div>
        x-template 範例
    </div>
</script>
<script type="module">
import external from './component.js';
const area2 = {
  data() {
    return {
      text: "根元件的子元件/區域註冊"
    };
  },
  template: `<div>
    <h4>{{ text }}</h4>
  </div>`  
}
const app = Vue.createApp({
  data() {
    return {
      text: "外部元件"
    };
  },
  components:{
    area2,
    external
  }
});
app.component("ConTainer", {
  data() {
    return {
      text: "內部元件/全域註冊"
    };
  },
  template: `<div>
    <h4>{{ text }}</h4>
  </div>`
});
app.component("demo", {
  template: '#xtemplate'
});
app.mount("#app");
</script> 
  • <script type="text/x-template" id="xtemplate">裡面撰寫HTML結構。
  • 元件demotemplate:'#xtemplate'對應上面的id="xtemplate"

單文件元件

建立Vue CLI之後每個.Vue檔都是一個元件,單一檔案就包含HTML,JS,CSS

以上如有錯誤,歡迎指教 /images/emoticon/emoticon16.gif


參考資料

六角學院
重新認識 Vue.js
Vue.js


上一篇
Vue.js 從零開始:生命週期
下一篇
Vue.js 從零開始:props 元件的溝通
系列文
Vue.js 從零開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言